<template>
  <el-row class="change" :gutter="16">
    <el-col :span="6">
      <h3>导入数据格式选择</h3>
      <ul class="left-nav">
        <li v-for="(item, index) in leftNavList"
            :key="index"
            :class="{'active': index === 0}"
            @click="handleSelComponent(item)">
          {{item.label}}
        </li>
      </ul>
    </el-col>
    <el-col :span="18">
      <div class="grid-content">

        <section class="item">
          <hgroup>原文上传</hgroup>
          <div class="item-center">
            <el-form :model="ruleForm"
                     label-width="130px"
                     class="demo-ruleForm">
              <el-form-item label="原文挂接类型：">
                <el-radio-group v-model="ruleForm.radio">
                  <el-radio :label="1">备选项</el-radio>
                  <el-radio :label="2">备选项</el-radio>
                  <el-radio :label="3">备选项</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="选择数据：">
                <el-upload
                  class="upload-demo"
                  ref="upload"
                  action="https://jsonplaceholder.typicode.com/posts/"
                  :on-preview="handlePreview"
                  :on-remove="handleRemove"
                  :file-list="fileList"
                  :auto-upload="false">
                  <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                  <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
                  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                </el-upload>
              </el-form-item>
            </el-form>
          </div>
        </section>

        <section class="item">
          <hgroup>上传后路径</hgroup>
          <div class="item-center">
            <el-form :model="ruleForm"
                     label-width="130px"
                     class="demo-ruleForm">
              <el-form-item label="数据路径：">
                <span></span>
              </el-form-item>
              <el-form-item label="原文存储根路径：">
                <span></span>
              </el-form-item>
            </el-form>
          </div>
        </section>

        <section class="item">
          <hgroup>数据读取设置</hgroup>
          <div class="item-center">
            <el-form :model="ruleForm"
                     label-width="130px"
                     class="demo-ruleForm">
              <el-form-item label="元数据列：">
                <el-input v-model="ruleForm.name"></el-input>
              </el-form-item>
              <el-form-item label="数据开始列：">
                <el-input v-model="ruleForm.name"></el-input>
              </el-form-item>
              <el-form-item label="数据结束列：">
                <el-input v-model="ruleForm.name"></el-input>
              </el-form-item>
              <el-form-item label="空值导入：">
                <el-input v-model="ruleForm.name" style="width: 100px; margin-right: 15px"></el-input>
                <span>作为null值导入</span>
              </el-form-item>
            </el-form>
          </div>
        </section>

        <div class="text-right">
          <el-button type="primary" @click="handleSetStep(2)">下一步</el-button>
        </div>

      </div>
    </el-col>
  </el-row>
</template>

<script>
import { mapActions } from 'vuex'

export default {
  name: 'changeDataSource',
  data () {
    return {
      ruleForm: {
        radio: '',
        name: ''
      },
      fileList: [],
      leftNavList: [{
        label: 'Microsoft Office Excel',
        component: ''
      }]
    }
  },
  methods: {
    ...mapActions('importData/setImportDataStep', ['setImportDataStep']),
    handleSetStep (step) {
      this.setImportDataStep(step)
    },
    handleSelComponent (item) {
      console.log(item)
    },
    submitUpload () {
      this.$refs.upload.submit()
    },
    handleRemove (file, fileList) {
      console.log(file, fileList)
    },
    handlePreview (file) {
      console.log(file)
    }
  }
}
</script>

<style lang="scss" scoped>
  .change {
    .grid-content {
      height: calc(100vh - 160px);
      overflow-y: auto;
      margin-right: -15px;
      padding-right: 15px;
      .item{
        margin-bottom: 20px;
        hgroup{
          background: #40a9ff;
          color: #fff;
          font-size: 15px;
          line-height: 36px;
          height: 36px;
          padding-left: 15px;
          border-radius: 4px 4px 0 0;
        }
        .item-center{
          border: 2px solid #ccc;
          border-top: none;
          min-height: 10px;
          padding: 15px 40px 0 15px;
        }
      }
    }
    h3{
      line-height: 40px;
      background: #F5F7FA;
      padding: 0 15px;
      color: #333;
    }
    .left-nav{
      text-align: center;
      line-height: 40px;
      background: #f7f7f7;
      height: calc(100vh - 210px);
      margin-top: 10px;
      li{
        cursor: pointer;
        border-radius: 4px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        & + li{
          border-top: 2px solid #fff;
        }
        &.active, &:hover{
          background: #40a9ff;
          color: #fff;
        }
        &:hover{
          opacity: 0.8;
        }
      }
    }
  }
</style>
